<template>
	<view class="container">
	<view class="con_header">
		<view class="image">
			<!-- 图片 -->
		</view>
		<text>护工名称/商家名称</text>
	</view>
	<!-- 横线 -->
	<view class="" style="width: 100vw;height: 10px;background: #F5F5F5;">
	</view>
	<view class="mian">
		<view class="mian_xinixn" v-for="(item,index) in xinxinlist" :key="item">
			<view class="xinxin">
				<text>{{item}}</text>
				<u-rate active-color="#F2CB51 " inactive-color="#b2b2b2" gutter="10"	:count="count" v-model="value1"></u-rate>
			</view>
			<view class="xinxin_right"><!-- 图片 --></view>
			
		</view>
		
		<u--textarea v-model="value2" placeholder="请客观真实地描述物品及交易体验，不超过200个字" count maxlength='200' style="min-height: 200px;background: #F5F5F5;;"></u--textarea>
		
		<view class="silde">
			<text>是否匿名</text>
			<u-switch
				space="2" v-model="switchfage" activeColor="#FB774B"
				inactiveColor="rgb(230, 230, 230)">
			</u-switch>
		</view>
		
	</view>
		
		<view class="btn_foot">
			<view class="btn">
			提交
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				count:5, //星星总数
				value1:2, //选中个数   我这里简单列一个，到时候根据后端字段自行修改
				xinxinlist:['综合评价','真实描述','服务技能','服务态度'],  //这里到时候会是个对象，
				value2 :'',//文本域里面的
				switchfage:false
			}
		}
	}
</script>

<style lang="scss" scoped>
	view{
				box-sizing: border-box;
				font-family: PingFang SC, PingFang SC;
	}
	.container{
		
	}
	.con_header{
		background-color: #fff;
		padding: 15px;
		min-height: 95px;
		display: flex;
		align-items: center;
		.image{
			width: 60px;
			height: 60px;
			border-radius: 10px 10px 10px 10px;
			background-color: #ccc;
			margin-right: 10px;
		}
		text{
			font-size: 14px;
			font-weight: bold;
			color: #333333;
		}
	}
	.mian{
		background-color: #fff;
		padding: 15px;
		.mian_xinixn{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 15px;
			.xinxin_right{
				width: 43px;
				height: 18px;
				background-color: #FB774B;
				border-radius: 99px;
			}
			.xinxin{
				display: flex;
				align-content: center;
				text{
					display: block;
					font-size: 14px;
					font-weight: bold;
					color: #333333;
					margin-right: 15px;
				}
			}
		}
		.silde{
			margin-top: 15px;
			padding: 0 15px;
			background: #F5F5F5;
			border-radius: 10px 10px 10px 10px;
			height: 45px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			text{
				font-size: 16px;
				font-weight: bold;
				color: #333333;
				
			}
		}
	}
	
	.btn_foot{
		width: 100vw;
		position: fixed;
		bottom: 0;
		height: 80px;
		padding: 10px 14px 0 14px;
		box-shadow: 0px -2px 4px 1px rgba(0,0,0,0.05);
		.btn{
			display: flex;
			height: 40px;
			border-radius: 999px;
			justify-content: center;
			align-items: center;
			font-weight: bold;
			font-size: 16px;
			font-weight: bold;
			color: #fff;
			background-color: #FB774B;
		}
	}
</style>